<template>
	<view>
		<view class="kefuInfo" v-if="kefu!=null">
			<view><image class="avator" :src="kefu.avator"></image></view>
			<view style="color: #333;">{{kefu.nickname}}</view>
			<view style="color: #333;">{{kefu.name}}</view>
		</view>
		<uni-list>
			<uni-list-item :show-extra-icon="true" :extra-icon="chatIcon" clickable  @click="visitorChatUrl" title="访客聊天/聊天二维码" ></uni-list-item>
			<uni-list-item :show-extra-icon="true" :extra-icon="wechatIcon" clickable  link to="/pages/index/wechat" title="微信绑定/解绑" ></uni-list-item>
		    <uni-list-item :show-extra-icon="true" :extra-icon="logoutIcon" clickable  @click="logout" link to="/pages/index/login" title="退出登录" ></uni-list-item>
		</uni-list>
	</view>
</template>

<script>
	import toolsHelper from '../../common/tools.js';
	export default {
		data() {
			return {
				kefu:null,
				token:"",
				baseUrl:"",
				logoutIcon:{color: '#3b4144',size: '22',type: 'info'},
				wechatIcon:{color: '#3b4144',size: '22',type: 'weixin'},
				chatIcon:{color: '#3b4144',size: '22',type: 'chatbubble-filled'},
				visitorUrl:"",
			}
		},
		// 页面显示
		onShow() {
			let _this = this;
			let res = uni.getStorageSync('app');
			if (res) {
				this.token = res.token;
			}
			let domainInfo = uni.getStorageSync('domain');
			if (domainInfo) {
				this.baseUrl = domainInfo.domain;
			}
			this.kefuInfo();
		},
		methods: {
			kefuInfo() {
				var _this = this;
				uni.request({
					url: _this.baseUrl + '/kefu/kefuinfo?token=' + _this.token,
					method: 'get',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: function(res) {
						_this.kefu=res.data.result;
						_this.kefu.avator=toolsHelper.getImageUrl(_this.kefu.avator,_this.baseUrl);
						_this.visitorUrl=_this.baseUrl+"/chatIndex?ent_id="+_this.kefu.ent_id;
					}
				});
			},
			logout(){
				uni.removeStorageSync("app");
				uni.redirectTo({
					url: '/pages/index/login'
				});
			},
			visitorChatUrl(){
				uni.redirectTo({
					url: '/pages/index/visitorChat'
				});
				//window.open(this.visitorUrl);
			}
		}
	}
</script>

<style>
	.kefuInfo{
		display: flex;
		flex-direction: column;
		text-align: center;
		padding: 20px;
		background-color: #eef0f6;
	}
	.kefuInfo .avator{
		width: 130px;
		height: 130px;
		border-radius: 50%;
		margin-bottom: 20px;
	}
</style>